
// webpack  的配置文件 === 只要是更改了配置文件就需要重启
const path = require('path')

//自动生成html 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'inline-source-map',//准确找出log输出位置,因为压缩后位置可能不对
  entry:path.join(__dirname,'src/main.js'),//入口 === 重新定义入口  入口:默认是 src/index === 想重新定义 src/index


  output:{// 出口 == dist /main===
    path:path.join(__dirname,'dist'),
    filename:'app.js',
    clean:true // 将之前的dist 文件先清空在生成一个新 dist
  },


  plugins:[//插件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html') // 以指定的 html 文件作为生成模板
    }),
  ],


  module:{
    rules:[ //规则列表
      {
        test: /\.css$/i,// 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      },
      {
        test: /\.less$/i,// 匹配 .less 结尾的文件
        use: ['style-loader','css-loader','less-loader',]
      },
      { // 针对资源模块（图片，字体文件，图标文件等）处理
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
        generator: { // 输出文件时，路径+名字
          filename: 'assets/[hash][ext]'
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 排除指定目录里的 js （不进行编译降级）
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 预设规则
          }
        }
      }
    ]
  },

  resolve: {//创建 import 或 require 的别名，来确保模块引入变得更简单
    alias: {
      MyUtils: path.resolve(__dirname, 'src/utils'),
      '@': path.resolve(__dirname, 'src')
    }
  }
}